<template>
  <div class="wrap">
    <!-- 标题 -->
    <div class="title_box">
      <span class="span_title_static">设备水质数据</span>
      <span class="span_title_sync">{{ equipmentStore.$state.devInfo.devName }}</span>
    </div>

    <!-- 数据卡片 -->
    <div class="dataCard_box">
      <dataCard
        class="dataCard animate__pulse"
        :data="parls"
        v-for="parls in equipmentStore.$state.paramList"
        :key="parls.id"
      />
    </div>

    <!-- 如果没有数据，不显示空白页面，显示暂无数据组件 -->
    <!-- <noData v-if="equipmentStore.$state.paramList == '[]'"></noData> -->
  </div>
</template>

<script lang="ts">
import { Message } from '@arco-design/web-vue'
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'newestData'
})
</script>
<script lang="ts" setup>
// 引入
import { getCurrentDevNewestDataListApi } from '@/apis/equipment/index'
import dataCard from './module/dataCard/index.vue'
import noData from '@/components/noData/index.vue'
import { useRoute } from 'vue-router'
import { useEquipmentStore } from '@/store'
const equipmentStore = useEquipmentStore()

// 上个页面通过路由传递过来的devId
const devId = ref('')

// 获取当前设备检测数据的函数
const getCurrentDevNewestDataListFunc = async () => {
  const res = await getCurrentDevNewestDataListApi(equipmentStore.$state.devInfo.devId)
  equipmentStore.$state.paramList = res.data
  console.log(equipmentStore.$state.paramList)
}

// 初始化
onMounted(() => {
  equipmentStore.$state.paramList = []
  devId.value = equipmentStore.$state.devInfo.devId
  getCurrentDevNewestDataListFunc()
  // Message.success('加载成功')
})
</script>

<style scoped>
.wrap {
  padding: 14px 0px 14px 14px;
  /* height: 0px; */
  overflow: auto;
}

.span_title_static,
.span_title_sync {
  color: rgb(49, 69, 106);
  font-family: kaigengo-bold;
  font-weight: 700 !important;
  font-size: 20px !important;
}

.span_title_sync {
  margin-left: 15px;
}

.explain_box {
  margin-top: 8px;
  color: gray;
}

.dataCard_box {
  /* padding: 20px 0px; */
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  margin-right: 18px;
  flex-wrap: wrap;
}
.dataCard {
  margin-top: 14px;
  margin-right: 11px;
  margin-left: 0px;
}
</style>
